<!--
 * @Description:
 * @Autor: Fan
 * @Date: 2021-10-18 14:10:34
 * @LastEditors  : Zi Jun
 * @LastEditTime : 2021-12-12 20:15:21
-->

<template>
  <router-view v-slot="{ Component }">
    <keep-alive v-if="isKeepAlive">
      <component :is="Component" />
    </keep-alive>
    <component :is="Component" v-if="!isKeepAlive" />
  </router-view>
</template>

<script setup lang="ts" name="App">
const route = useRoute();
const store = useStore();

// 当前路由是否缓存
const isKeepAlive = ref(route.meta.keepAlive);

// 监听页面缩放,pc/mobile,可处理对应响应
watch(() => store.getters['app/mode'], (prev, posv) => {
  if (prev === posv) return;
  if (prev === 'pc') {
    console.log('目前pc模式');
  } else if (prev === 'mobile') {
    console.log('目前mobile模式');
  }
  document.body.setAttribute('data-mode', prev);
}, {
  immediate: true,
});

// onresize事件监听页面缩放,pc/mobile模式,防抖优化
onMounted(() => {
  window.onresize = useDebounceFn(() => {
    store.commit('app/SET_MODE', document.documentElement.clientWidth);
  }, 300);
});
</script>
